<template>
  <t-dialog :visible="dialogVisible" size="small" @dialog-close="cancel">
    <div slot="title" class="app-service-center-content-state-update-dialog__title">{{ dialogTitle }}</div>
    <div slot="content" class="app-service-center-content-state-update-dialog__content">
      <div class="app-service-center-content-state-update-dialog__content__name">
        <div class="app-service-center-content-state-update-dialog__content__name__title">每日 [习惯番茄] 目标</div>
        <div class="app-service-center-content-state-update-dialog__content__name__value">  
          <t-input :value="currentInput.todayHabitTomatoAmountTarget" :focus="true" @input="handleCurrentInputTodayHabitTomatoAmountTarget"></t-input>    
        </div>
      </div>
      <div class="app-service-center-content-state-update-dialog__content__synopsis">
        <div class="app-service-center-content-state-update-dialog__content__synopsis__title">每日 [专题番茄] 目标</div>
        <div class="app-service-center-content-state-update-dialog__content__synopsis__value">
          <t-input :value="currentInput.todayTopicTomatoAmountTarget" @input="handleCurrentInputTodayTopicTomatoAmountTarget"></t-input>              
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: right;">
      <t-button size="normal" type="insert" @click="updateItem">确定</t-button>
      <t-button size="normal" type="primary" @click="cancel">退出</t-button>
    </div>
  </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-service-center-content-state-update-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
    },
    components: {
      TDialog,
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
    },
    data() {
      return {
        nameAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        synopsisAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        currentInput: {
          todayHabitTomatoAmountTarget: 0,
          todayTopicTomatoAmountTarget: 0,
        },
      };
    },
    computed: {
      dialogTitle() {
        return this.store.updateDialog.title;
      },
      dialogVisible() {
        return this.store.updateDialog.visible;
      },
      originTodayTopicTomatoAmountTarget() {
        return this.store.todayTopicTomatoAmountTarget;
      },
      originTodayHabitTomatoAmountTarget() {
        return this.store.todayHabitTomatoAmountTarget;
      },
    },
    watch: {
      originTodayTopicTomatoAmountTarget(val) {
        this.currentInput.todayTopicTomatoAmountTarget = val;
      },
      originTodayHabitTomatoAmountTarget(val) {
        this.currentInput.todayHabitTomatoAmountTarget = val;
      },
    },
    methods: {
      handleCurrentInputTodayHabitTomatoAmountTarget(val) {
        this.currentInput.todayHabitTomatoAmountTarget = val;
      },
      handleCurrentInputTodayTopicTomatoAmountTarget(val) {
        this.currentInput.todayTopicTomatoAmountTarget = val;
      },
      cancel() {
        this.$emit('close');
      },
      updateItem() {
        const todayHabitTomatoAmountTarget = this.currentInput.todayHabitTomatoAmountTarget;
        const todayTopicTomatoAmountTarget = this.currentInput.todayTopicTomatoAmountTarget;
        this.store.todayHabitTomatoAmountTarget = todayHabitTomatoAmountTarget;
        this.store.todayTopicTomatoAmountTarget = todayTopicTomatoAmountTarget;
        const target = 'api/state/tomato-target';
        this.$http.request({
          url: target,
          method: 'put',
          data: {
            todayHabitTomatoAmountTarget,
            todayTopicTomatoAmountTarget,
          },
          transformRequest: [(data) => {
            /* eslint-disable max-len */
            const encodeTodayHabitTomatoAmountTarget = encodeURIComponent(data.todayHabitTomatoAmountTarget);
            const encodeTodayTopicTomatoAmountTarget = encodeURIComponent(data.todayTopicTomatoAmountTarget);
            return `todayHabitTomatoAmountTarget=${encodeTodayHabitTomatoAmountTarget}&todayTopicTomatoAmountTarget=${encodeTodayTopicTomatoAmountTarget}`;
          }],
        }).then(() => {
          this.$emit('close');
        }).catch(() => {
        });
      },
    },
  };
</script>